<template>
  <div>
    <input type="text" v-model="name"><button @click="add">添加</button>
    <ul>
      <li v-for="person,index in personList" :key="index">
        <b>{{person.name}}</b>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {nanoid} from 'nanoid'
  export default {
      name:'person',
      data() {
        return {
          name:''
        }
      },
      computed: {
        ...mapState(['personList'])
      },
      methods: {
        add() {
          let person = {name:this.name, id:nanoid()};
          this.$store.dispatch('addperson',person)
          this.name = ''
        }
      },
  }
</script>

<style>

</style>